<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>CodeMirror: Compression Helper</title>
    <link rel="stylesheet" type="text/css" href="css/docs.css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
    </style>
  </head>
  <body>

<h1><span class="logo-braces">{ }</span> <a href="http://codemirror.net/">CodeMirror</a></h1>

<pre class="grey">
<img src="css/baboon.png" class="logo" alt="logo"/>/* Script compression
   helper */
</pre>

    <p>The CodeMirror scripts, as distributed, are many, and full of
    comments. To optimize page loading, it is recommended to
    concatenate the scripts loaded in the CodeMirror frame, and
    compress them. This page may be useful if you intend to do this:
    it provides an interface to two different minifiers, <a
    href="http://github.com/mishoo/UglifyJS/">UglifyJS</a> and
    Google's <a href="http://closure-compiler.appspot.com/">Closure
    compiler</a>, allowing you to easily feed them CodeMirror
    scripts.</p>

    <p>You will have to compress <code>codemirror.js</code>
    separately, since that will be loaded into the top-level page from
    which you use CodeMirror. Inside the frame, the
    <code>parserfile</code> and <code>basefiles</code> options control
    which files are loaded. If you combine the parser(s) you need with
    the basefiles, you can set <code>basefiles</code> to point at your
    compressed file, and leave <code>parserfiles</code> at
    <code>[]</code>.</p>

    <p>For example, you have a page that uses CodeMirror to edit some
    JavaScript code. You could save a minimized version of
    <code>codemirror.js</code> as <code>codemirror_min.js</code>, and
    include that (with a <code>&lt;script></code> tag) in your page.
    Next, you compress all the files under "In-frame base code", plus
    <code>tokenizejavascript.js</code> and
    <code>parsejavascript.js</code> into
    <code>codemirror_base.js</code>, and load the editor like
    this:</p>

    <pre class="code">CodeMirror.fromTextArea("mytextarea", {
  basefiles: ["js/codemirror_base.js"],
  lineNumbers: true
});</pre>

    <p>Clicking the "Compress with UglifyJS" button will download the
    compressed file. If you use Closure, that doesn't support direct
    downloads, so the button will take you to a file containing the
    compressed code. Copy-paste this into your script file. ("Save as"
    for that page is broken on some browsers, so be careful).</p>

    <form id="form" action="http://marijnhaverbeke.nl/uglifyjs" method="post">
      <input type="hidden" id="download" name="download" value=""/>
      <p>Version: <select id="version" onchange="setVersion(this);" class="field" style="padding: 1px">
        <option value="http://codemirror.net/" selected>Development head</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.91;f=">v0.91</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.9;f=">v0.9</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.8;f=">v0.8</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.7;f=">v0.7</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.67;f=">v0.67</option>
        <option value="http://marijnhaverbeke.nl/git/codemirror?a=blob_plain;hb=v0.66;f=">v0.66</option>
      </select></p>

      <p><input type="hidden" value="compiled_code" name="output_info" id="output"/>

      <select multiple="multiple" name="code_url" style="width: 40em;" class="field" id="files">
        <optgroup label="CodeMirror Library">
          <option value="http://codemirror.net/js/codemirror.js">codemirror.js</option>
        </optgroup>
        <optgroup label="In-frame base files">
          <option value="http://codemirror.net/js/util.js">util.js</option>
          <option value="http://codemirror.net/js/stringstream.js">stringstream.js</option>
          <option value="http://codemirror.net/js/select.js">select.js</option>
          <option value="http://codemirror.net/js/undo.js">undo.js</option>
          <option value="http://codemirror.net/js/editor.js">editor.js</option>
          <option value="http://codemirror.net/js/tokenize.js">tokenize.js</option>
        </optgroup>
        <optgroup label="Parsers">
          <option value="http://codemirror.net/js/tokenizejavascript.js">tokenizejavascript.js</option>
          <option value="http://codemirror.net/js/parsejavascript.js">parsejavascript.js</option>
          <option value="http://codemirror.net/js/parsexml.js">parsexml.js</option>
          <option value="http://codemirror.net/js/parsecss.js">parsecss.js</option>
          <option value="http://codemirror.net/js/parsesparql.js">parsesparql.js</option>
          <option value="http://codemirror.net/js/parsehtmlmixed.js">parsehtmlmixed.js</option>
          <option value="http://codemirror.net/js/parsedummy.js">parsedummy.js</option>
        </optgroup>
        <optgroup label="Contributed parsers">
          <option value="http://codemirror.net/contrib/lua/js/parselua.js">parselua.js</option>
          <option value="http://codemirror.net/contrib/python/js/parsepython.js">parsepython.js</option>
          <option value="http://codemirror.net/contrib/php/js/tokenizephp.js">tokenizephp.js</option>
          <option value="http://codemirror.net/contrib/php/js/parsephp.js">parsephp.js</option>
          <option value="http://codemirror.net/contrib/php/js/parsephphtmlmixed.js">parsephphtmlmixed.js</option>
          <option value="http://codemirror.net/contrib/csharp/js/tokenizecsharp.js">tokenizecsharp.js</option>
          <option value="http://codemirror.net/contrib/csharp/js/parsecsharp.js">parsecsharp.js</option>
          <option value="http://codemirror.net/contrib/sql/js/parsesql.js">parsesql.js</option>
          <option value="http://codemirror.net/contrib/plsql/js/parseplsql.js">parseplsql.js</option>
          <option value="http://codemirror.net/contrib/scheme/js/tokenizescheme.js">tokenizescheme.js</option>
          <option value="http://codemirror.net/contrib/scheme/js/parsescheme.js">parsescheme.js</option>
          <option value="http://codemirror.net/contrib/ometa/js/tokenizeometa.js">tokenizeometa.js</option>
          <option value="http://codemirror.net/contrib/ometa/js/parseometa.js">parseometa.js</option>
          <option value="http://codemirror.net/contrib/xquery/js/tokenizexquery.js">tokenizexquery.js</option>
          <option value="http://codemirror.net/contrib/xquery/js/parsexquery.js">parsexquery.js</option>
          <option value="http://svn.exoplatform.org/projects/gwt/trunk/exo-gwtframework-editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/tokenizegroovy.js">tokenizegroovy.js</option>
          <option value="http://svn.exoplatform.org/projects/gwt/trunk/exo-gwtframework-editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/parsegroovy.js">parsegroovy.js</option>
        </optgroup>
      </select></p>

      <p>
        <button type="submit" onclick="uglify();">Compress</button> with <a href="http://github.com/mishoo/UglifyJS/">UglifyJS</a><br/>
        <button type="submit" onclick="google();">Compress</button> with <a href="http://closure-compiler.appspot.com/home">Google Closure</a><br/>
        <button type="submit" onclick="verify();">Check</button> for errors
      </p>

      <p>Custom code to add to the compressed file:<textarea name="js_code" style="width: 100%; height: 15em;" class="field"></textarea></p>
    </form>

    <script type="text/javascript" src="css/font.js"></script>

    <script type="text/javascript">
      function $(name) {return document.getElementById(name);}

      function setVersion(ver) {
        var urlprefix = ver.options[ver.selectedIndex].value;
        console.log(urlprefix);
        var select = $("files"), m;
        for (var optgr = select.firstChild; optgr; optgr = optgr.nextSibling)
          for (var opt = optgr.firstChild; opt; opt = opt.nextSibling) {
            if (opt.nodeName != "OPTION")
              continue;
            else if (m = opt.value.match(/^http:\/\/codemirror.net\/(.*)$/))
              opt.value = urlprefix + m[1];
            else if (m = opt.value.match(/http:\/\/marijnhaverbeke.nl\/git\/codemirror\?a=blob_plain;hb=[^;]+;f=(.*)$/))
              opt.value = urlprefix + m[1];
          }
      }

      var download = $("download");
      function verify() {
        google();
        $("output").value="warnings";
      }
      function google() {
        $("output").value="compiled_code";
        if (download.parentNode) download.parentNode.removeChild(download);
        $("form").action = "http://closure-compiler.appspot.com/compile";
      }
      function uglify() {
        var names = [], files = $("files");
        for (var i = 0; i < files.options.length; i++) {
          var opt = files.options[i];
          if (opt.selected)
            names.push(opt.text.match(/^(.*).js$/)[1]);
        }
        download.value = (names.join("-") || "codemirror") + ".js";
        if (!download.parentNode) $("form").appendChild(download);
        $("form").action = "http://marijnhaverbeke.nl/uglifyjs";
      }
    </script>

  </body>
</html>
